<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单首古诗的页面</title>
    <link rel="stylesheet" href="bootstrap-4.6.1-dist/css/bootstrap.min.css">
</head>
<body>
    <header id="header"></header>

    <div class="container" id="poemInfo">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="index.html">首页</a></li>
                <li class="breadcrumb-item"><a href="poems.html">诗词大全</a></li>
                <li class="breadcrumb-item active" aria-current="page" v-text="info.title">题宓庵壁</li>
            </ol>
        </nav>

        <div class="row">
            <div class="col col-sm-12 col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <h3 class="card-title" v-text="info.title">题宓庵壁</h3>
                        <p>
                            <a :href="'Dynasty.html?'+info.chaodai" v-text="info.chaodai">宋代</a>·
                            <a :href="'author.html?'+info.zuozhe" v-text="info.zuozhe">王洋</a>
                        </p>
                        <div v-html="info.body">
                            西风吹彻菊花黄，唤我东篱泛一觞。<br>白发插花休笑我，年年汝亦负重阳。
                        </div>
                    </div>
                </div>

                <div class="card mt-3">
                    <div class="card-header">
                        <h6>关于诗人</h6>
                    </div>
                    <div class="card-body d-flex">
                        <p v-html="poemInfo.txt">
                            王洋（1087—1154）宋楚州山阳人，字元渤。王资深子。徽宗宣和六年进士。高宗绍兴初诏试馆职，历秘书省正字、校书郎、守起居舍人，擢知制诰。十年以权发遣吉州换邵武军。洪皓使金归，人无敢过其居，洋独与往来，为人诬告与闻洪皓欺世飞语，以直徽猷阁出知饶州。寓居信州，有荷花水木之趣，因号王南池。善诗文，其诗极意镂刻，文章以温雅见长。有《东牟集》。
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer id="footer"></footer>
</body>
<!--引入jq代码-->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="bootstrap-4.6.1-dist/js/bootstrap.min.js"></script>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入axios 实现页面的异步请求-->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    $("#header").load("common/navigation.html")
    $("#footer").load("common/footer.html")

    var poemName = decodeURI(location.search.split("?")[1])
    console.log("古诗名为:"+poemName)

    let vm_poem = new Vue({
        el:"#poemInfo",
        data:{
            info:{},
            poemInfo:{},
        },
        created:function () {
            axios({
                url:"/poems/poemInfo/"+poemName,
                method:"post"
            }).then(function (response) {
                vm_poem.info = response.data;
                console.log(vm_poem.info)
                vm_poem.poemAuthor = response.data.zuozhe
                console.log("上方:"+vm_poem.poemAuthor)
            })
            axios({
                url:"/poems/writer/"+poemName,
                method:"post"
            }).then(function (resp) {
                vm_poem.poemInfo = resp.data;
            })
        },
    })
</script>
</html>